<template>
	<div class="page-user">
		<i class="back" @click="$router.replace({name: 'index'})">
			<icon name="angle-left" scale="4"></icon>
		</i>
		<div id="login-window" v-if="!logged">
			<div class="login-form">
				<input v-model="account" />
			</div>
			<div class="login-form">
				<input type="password" v-model="pwd" />
			</div>
			<!-- <div class="login-form">
				<input type="text" v-model="nickname" />
			</div> -->
			<div class="login-form">
				<button @click="login">login</button>
				<!-- <button @click="register">register</button> -->
			</div>
		</div>
		<div id="user-setting" v-else>
			<div class="info-area">
				<img :src="avatar" alt="avatar" id="big-avatar" />
			</div>
			<div class="info-area" style="flex: 1"></div>
			<div class="info-area">
				<div class="info-form">
					<span class="info-label">Nickname</span>
					<span class="info-value">{{name}}</span>
				</div>
				<div class="info-form">
					<span class="info-label img">Avatar</span>
					<span class="info-value img">
						<img :src="avatar" alt="avatar" />
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
	name: 'user',
	data() {
		return {
			account: "",
			pwd: "",
			name: '',
			avatar: '',
			nickname: ''
		}
	},
	computed: {
		...mapState('chatStatus', {
			logged: state => state.logged
		})
	},
	mounted() {
		this.name = localStorage.getItem("name") || '';
		this.avatar = localStorage.getItem("avatar") || '';
		this.getInfo();
	},
	methods: {
		...mapMutations('chatStatus', [
			'setLog'
		]),
		setAccount(account, avatar, name, id) {
			localStorage.setItem("account", account);
			localStorage.setItem("avatar", avatar);
			localStorage.setItem("name", name);
			localStorage.setItem("id", id);
		},
		getInfo() {
			this.axios.post("user/find", { id: localStorage.getItem("id") || "" }).then(res => {
				if (res.data.ok) {
					this.setLog(true);
					let obj = res.data.data;
					this.setAccount(obj.account, obj.avatar, obj.name, obj._id);
				}
			})
		},
		login() {
			// this.setLog(true);
			// localStorage.setItem("account", this.account);
			// localStorage.setItem("password", this.pwd);
			// this.setLog(state, true);
			// this.axios.post("https://localhost:2888/room/create", { name: 'test-room', creatorId: "5b3ae87a36e84baf09efbb3d" }).then(res => {
			// 	console.log(res)
			// })
			// this.axios.post("https://localhost:2888/room/addMember", { roomId: "5b36f16ae723aa9a39b792ff", memberId: "5b36f18b7d45f999fa0a11f0" }).then(res => {
			// 	console.log(res)
			// })
			// this.axios.post("https://localhost:2888/user/add", { account: "dumingqi", pwd: "dmq19951228", avatar: "", name: "杜明骑" }).then(res => {
			// 	// if (res.data.ok) {
			// 	// 	localStorage.setItem("account", this.account);
			// 	// 	localStorage.setItem("password", this.pwd);
			// 	// 	localStorage.setItem("avatar", res.data.data.avatar);
			// 	// 	localStorage.setItem("name", res.data.data.name);
			// 	// 	localStorage.setItem("token", res.data.token);
			// 	// }
			// })
			// this.axios.post("https://localhost:2888/user/test", { account: "tangyue", token: localStorage.getItem("token") }).then(res => {
			// 	console.log(res)
			// })
			this.axios.post("user/login", { account: this.account, pwd: this.pwd }).then(res => {
				if (res.data.ok) {
					localStorage.setItem("token", res.data.token);
					this.setAccount(this.account, res.data.data.avatar, res.data.data.name, res.data.data._id);
					this.$router.replace({ name: "index" });
				}
				this.setLog(res.data.ok);
			})

			// this.axios.post("https://localhost:2888/room/findUserRooms", { userId: '5b3ae87a36e84baf09efbb3d' }).then(res => {
			// 	console.log(res)
			// })
		},
		register() {
			this.axios.post("user/add", { account: this.account, pwd: this.pwd, name: this.nickname, avatar: "" }).then(res => {
				if (res.data.ok) {
					localStorage.setItem("token", res.data.token);
					this.setAccount(this.account, res.data.data.avatar, res.data.data.name, res.data.data._id);
					this.$router.replace({ name: "index" });
				}
				this.setLog(res.data.ok);
			})
		}
	}
};
</script>

<style>
.page-user {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: #000;
	background-image: url(../assets/img/ironman.jpg);
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50%;
}

.page-user * {
	box-sizing: border-box;
}

#login-window {
	width: 100%;
}

.login-form {
	width: 90%;
	margin: 0 auto 30px auto;
	text-align: center;
}

.login-form input {
	width: 100%;
	height: 60px;
	color: #fff;
	background: transparent;
	border: 1px solid #909090;
	padding: 0 20px;
	font-size: 18px;
	transition: all 0.3s ease;
}

.login-form input:focus {
	outline: 0;
	border: 2px solid #449ece;
	border-radius: 5px;
}

.login-form button {
	width: 90%;
	height: 50px;
	border: 1px solid #972624;
	background: transparent;
	color: #972624;
	letter-spacing: 5px;
	font-size: 20px;
	cursor: pointer;
}

.login-form button:focus {
	outline: 0;
	border: 2px solid #972624;
}

#user-setting {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#user-setting .info-area {
	flex: 2;
	background: transparent;
	background-color: transparent;
	text-align: center;
	color: #fff;
	width: 100%;
	height: 100%;
	/* overflow: hidden; */
}

#user-setting #big-avatar {
	width: 250px;
	/* height: 100%; */
	background: transparent;
	background-color: transparent;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 2px 5px 30px #fff;
}

#user-setting .info-form img {
	width: 60px;
	vertical-align: -webkit-baseline-middle;
}
.info-form {
	text-align: left;
	padding: 0px 30px;
	margin-bottom: 20px;
}

.info-form .info-label {
	display: block;
	width: 100px;
	height: 100%;
}

.info-form .info-value {
	display: block;
	height: 100%;
	padding: 10px 20px 5px 20px;
	border-bottom: 1px solid #fff;
}

.info-form .info-label.img {
	display: inline-block;
}

.info-form .info-value.img {
	display: inline-block;
	border: none;
}

.info-form .info-value.img img {
	border: 1px solid #fff;
}

.back {
	color: #fff;
	position: absolute;
	left: 30px;
	top: 30px;
	cursor: pointer;
}
</style>
